<link rel="stylesheet" href="ccay/example/demo.css"  type="text/css" />
<script type="text/javascript" src="ccay/example/demo.js" charset="utf-8"></script>
<script type="text/javascript" src="ccay/example/ui/igrid/eventFunction.js" charset="utf-8"></script>
<style type="text/css">
h5{font-size: 13px; font-weight: normal; line-height: 13px; float: right;}
h6{font-size: 13px; color: red; float: left; line-height: 13px;}
.showClew{font-size: 12px; color: olive;}
.showClew span{color: peru;}
.spanShow{color: peru;}
</style>
<div id="eventFunctionDemo">
	<!-- API区 -->
	<div title='API' tabid='tab1'><br />
		<h2 style="cursor: pointer;"><a onclick="Ccay.Common.toggle(this,'#eventApi')">IGrid事件Event属性配置表</a></h2>
		<div style="display:none" id="eventApi">
			<form class="init ccay-form  longtitle">
			<div class="ccay-form-body ccay-form-custom">
				<ul>						
					<li class="ccay-form-row">
						<samp><h3>属性</h3></samp>
						<span class="ccay-form-input"><h3 style="float: left;">描述</h3><h5><a onclick="Ccay.example.ui.igird.eventFunction.openDemo('tab2');">点击查看Demo</a></h5></span>
					</li>
					<li class="ccay-form-row">
						<samp class="i18n" i18nKey="fnBeforeBindData(op, dataset, pageVO)"></samp>
						<span class="ccay-form-input">{Function} 设置igrid绑定数据之前的事件<br>op：{Object} igrid的配置项<br>dataset：{Array} 数据集<br>pageVO：{Object} 分页信息</span>
					</li>
					<li class="ccay-form-row">
						<samp class="i18n" i18nKey="fnBeforeEdit(value, td, col, rowData)"></samp>
						<span class="ccay-form-input">{Function} 设置igrid编辑之前的事件<br>value：{String} igrid的单元格值<br>td：{Object} igrid的列Dom对象<br>col：{Object} igrid的列对象<br>rowData：{Object} 行数据<br>返回false，将不进行单元格的编辑操作</span>
					</li>
					<li class="ccay-form-row">
						<samp class="i18n" i18nKey="fnBeforeRequest(op)"></samp>
						<span class="ccay-form-input">{Function} 设置igrid发送请求之前的事件<br>op：{Object} igrid的配置项</span>
					</li>
					<li class="ccay-form-row">
						<samp class="i18n" i18nKey="fnBeforeRowEdit(rowData, row)"></samp>
						<span class="ccay-form-input">{Function} 设置igrid编辑之前的行事件<br>rowData：{Object} 行数据<br>row：{Object} 行对象<br>返回false，将不进行行的编辑操作</span>
					</li>
					<li class="ccay-form-row">
						<samp class="i18n" i18nKey="fnDataBindComplete()"></samp>
						<span class="ccay-form-input">{Function} 设置igrid绑定数据绑定数据源完成之后的事件</span>
					</li>
					<li class="ccay-form-row">
						<samp class="i18n" i18nKey="fnComplete()"></samp>
						<span class="ccay-form-input">{Function} 设置igrid完成加载之后的事件</span>
					</li>
					<li class="ccay-form-row">
						<samp class="i18n" i18nKey="fnEndEdit(value, rowData, td, col, oldValue)"></samp>
						<span class="ccay-form-input">{Function} 设置igrid编辑之后的事件<br>value：{String} igrid的单元格值<br>rowData：{Object} igrid的行数据<br>td：{Object} igrid的列Dom对象<br>col：{Object} igrid的列对象<br>oldValue：{String} 原始值<br>返回false，将不进行任何操作<br>返回true，将进行整行渲染</span>
					</li>
					<li class="ccay-form-row">
						<samp class="i18n" i18nKey="fnEndRowEdit(rowData, row)"></samp>
						<span class="ccay-form-input">{Function} 设置igrid编辑之后的行事件<br>rowData：{Object} 行数据<br>row：{Object} 行对象<br>返回true，将进行整行渲染</span>
					</li>
					<li class="ccay-form-row">
						<samp class="i18n" i18nKey="fnInit(op)"></samp>
						<span class="ccay-form-input">{Function} 设置igrid初始化之前的事件<br>op：{Object} igrid的配置项</span>
					</li>
					<li class="ccay-form-row">
						<samp class="i18n" i18nKey="fnInitComplete(op)"></samp>
						<span class="ccay-form-input">{Function} 设置igrid完成初始化之后的事件<br>op：{Object} igrid的配置项</span>
					</li>
					<li class="ccay-form-row">
						<samp class="i18n" i18nKey="fnRenderRow(row, data, i)"></samp>
						<span class="ccay-form-input">{Function} 设置igrid自定义渲染行事件<br>row：{Object} igrid的行对象<br>data：{Object} igrid的行数据<br>i：{Number} igrid的行索引</span>
					</li>
					<li class="ccay-form-row">
						<samp class="i18n" i18nKey="fnRequest(op)"></samp>
						<span class="ccay-form-input">{Function} 设置igrid的请求事件<br>op：{Object} igrid的配置项</span>
					</li>
					<li class="ccay-form-row">
						<samp class="i18n" i18nKey="fnResize(width, col, cell)"></samp>
						<span class="ccay-form-input">{Function} 设置igrid的列大小改变事件<br>width：{Number} igrid的列大小<br>col：{Object} igrid的列对象<br>cell：{Object} igrid的单元格对象</span>
					</li>
					<li class="ccay-form-row">
						<samp class="i18n" i18nKey="fnSelected(selected, tr, rowData)"></samp>
						<span class="ccay-form-input">{Function} 设置igrid被选中之后的事件<br>selected：{Boolean} igrid的列是否被选中<br>tr：{Object} igrid的行对象<br>rowData：{Object} igrid的行数据</span>
					</li>
					<li class="ccay-form-row">
						<samp class="i18n" i18nKey="fnSelectedAll(selected, gird)"></samp>
						<span class="ccay-form-input">{Function} 设置igrid的全选事件<br>selected：{Boolean} igrid全选时否选中<br>grid：{obj} igrid对象</span>
					</li>
					<li class="ccay-form-row">
						<samp class="i18n" i18nKey="fnSort(sortField, sort, cell)"></samp>
						<span class="ccay-form-input">{Function} 设置igrid的排序事件<br>sortField：{String} igrid列的排序字段<br>sort：{String} igrid的排序类型<br>cell：{Object} igrid的单元格对象</span>
					</li>
					<li class="ccay-form-row">
						<samp class="i18n" i18nKey="onHeadClick(grid, e, target, col, grid)"></samp>
						<span class="ccay-form-input">{Function}设置表头的点击事件</span>
					</li>
					<li class="ccay-form-row">
						<samp class="i18n" i18nKey="onCellClick(value,rowData,td,tr)"></samp>
						<span class="ccay-form-input">{Function}grid点击事件<br>value：{String} igrid的单元格值<br>rowData：{Object} 行数据<br>td：{Object} igrid的列Dom对象<br>tr：{Object} igrid的行对象</span>
					</li>
					<li class="ccay-form-row">
						<samp class="i18n" i18nKey="onRowClick(value,rowData,td,tr)"></samp>
						<span class="ccay-form-input">{Function}设置触发行的点击事件</span>
					</li>
					<li class="ccay-form-row">
						<samp class="i18n" i18nKey="onMouseOver(value,rowData,td,tr)"></samp>
						<span class="ccay-form-input">{Function}mouseover事件会在鼠标移入对象时触发</span>
					</li>
				</ul>
			</div>
			</form>
		</div>
	</div>
	
	<!-- Demo区 -->
	<div title='IGrid事件属性' tabid='tab2'>
        <span class="showClew">备注：IGrid事件属性Demo显示绑定数据源完成之后、排序、列大小改变、被选中之后、自定义渲染行、完成加载之后、编辑之前以及编辑之后的八种事件</span><br><br>
	 	<div id="divShowEvent11" style="color: red; font-size: 13px;"></div>
	 	<div id="divShowEvent01" style="color: red; font-size: 13px;"></div>
	 	<div id="divShowEvent02" style="color: red; font-size: 13px;"></div>
	 	<div id="divShowEvent03" style="color: red; font-size: 13px;"></div>
	 	<div id="divShowEvent04" style="color: red; font-size: 13px;"></div>
	 	<div id="divShowEvent05" style="color: red; font-size: 13px;"></div>
	 	<div id="divShowEvent06" style="color: red; font-size: 13px;"></div>
	 	<div id="divShowEvent07" style="color: red; font-size: 13px;"></div>
	 	<div id="divShowEvent08" style="color: red; font-size: 13px;"></div>
	 	<div id="divShowEvent09" style="color: red; font-size: 13px;"></div>
	 	<div id="divShowEvent10" style="color: red; font-size: 13px;"></div>
	 	<div class="ccay-grid">
		 	<div class="ccay-grid-toolbar">
		 		<input type="button" id="btnLoad" class="i18n default" i18nKey="Click me to loading!" />
		 	</div>
		 	<div id="iStudent"></div>
	 	</div>
	 	<h3>html Code</h3>
	  	<span></span>
	  	<div class="codeArea">
			<pre id='html'>
&lt;div id="divEvent11" style="color: red;">&lt;/div>
&lt;div id="divEvent01" style="color: red;">&lt;/div>
&lt;div id="divEvent02" style="color: red;">&lt;/div>
&lt;div id="divEvent03" style="color: red;">&lt;/div>
&lt;div id="divEvent04" style="color: red;">&lt;/div>
&lt;div id="divEvent05" style="color: red;">&lt;/div>
&lt;div id="divEvent06" style="color: red;">&lt;/div>
&lt;div id="divEvent07" style="color: red;">&lt;/div>
&lt;div id="divEvent08" style="color: red;">&lt;/div>
&lt;div id="divEvent09" style="color: red;">&lt;/div>
&lt;div id="divEvent10" style="color: red;">&lt;/div>
&lt;div class="ccay-grid">
&lt;!-- 加载数据的按钮设置 -->
	&lt;div class="ccay-grid-toolbar">
		&lt;input type="button" id="btnClickLoad" class="i18n default" i18nKey="Click me to loading!" />
	&lt;/div>

	&lt;div id="igridDemo">&lt;/div>
&lt;/div>
			</pre>
		</div>
		<h3>js Code</h3>
      	<span></span>
      	<div class="codeArea">
      		<pre id='js'>
var gridOption = {
	//<span class="showClew"> 设置igrid可以进行编辑</span>
	editMode: true,
	
	//<span class="showClew"> 设置igrid不进行自动加载，点击加载按钮之后才加载数据</span>
	autoLoad: false,
	columns: [
		{field: 'id', columnType:'select', multi:true},
		{field: 'name', width:90, header: "ccay.common.label.name"},
		{field: 'sex', width:70, header: "sSex", type: 'bool', format: {isIcon: true}},
		{field: 'age', width:70, header: "sAge", type: 'integer'},
		{field: 'birthday', width:110, header: "sBirthday", type: 'date'},
		{field: 'blog', width:300, header: "sBlog", rendererType: 'ellipsis'},
		{field: 'lastUpdateDate', width:130, header: "ccay.common.label.lastUpdatedDate", type: 'datetime'}
	],
	//<span class="showClew"> 设置igrid初始化的事件</span>
	fnInit: function (op) {
		$("#divEvent11").html("fnInit：IGrid初始化的事件！");
	},
	
	//<span class="showClew"> 设置igrid的完成初始化之后的事件</span>
	fnInitComplete: function (op) {
		$("#divEvent01").html("fnInitComplete：IGrid完成初始化之后的事件，已正常显示表格框架！");
	},
	
	//<span class="showClew"> 设置igrid发送请求之前的事件</span>
	fnBeforeRequest: function (op) {
		$("#divEvent02").html("fnBeforeRequest：IGrid发送请求之前的事件！");
	},
	
	//<span class="showClew"> 设置igrid绑定数据之前的事件</span>
	fnBeforeBindData: function (op, data, pageVO) {
		$("#divEvent03").html("fnBeforeBindData：IGrid绑定数据之前的事件！");
	},
	
	//<span class="showClew"> 设置igrid绑定数据绑定数据源完成之后的事件</span>
	fnDataBindComplete: function () {
		$("#divEvent04").html("fnBindDataComplete：IGrid绑定数据绑定数据源完成之后的事件！");
	},
	
	//<span class="showClew"> 设置igrid完成加载之后的事件</span>
	fnComplete: function () {
		$("#divEvent05").html("fnComplete：IGrid完成加载之后的事件，已正常显示绑定数据之后表格！");
	},
	
	//<span class="showClew"> 设置igrid的排序事件</span>
	fnSort: function (sortField, sort, cell) {
		$("#divEvent06").html("fnSort：IGrid排序事件，当前是按照  " + sortField + " 列进行 " + sort + " 排序！");
		return true;
	},
	
	//<span class="showClew"> 设置igrid选中之后的事件</span>
	fnSelected: function (selected, tr, rowData) {
		$("#divEvent07").html("fnSelected：IGrid选中之后的事件，当前选中的数据的名称是： " + rowData.name);
	},
	
	//<span class="showClew"> 设置igrid的列大小改变事件</span>
	fnResize: function (width, col, cell) {
		$("#divEvent08").html("IGrid列大小改变事件，当前 " + col.field + " 列的大小是：&lt;span class='showClew'> " + width + " &lt;/span>px!");
		return true;
	},
	
	//<span class="showClew"> 设置igrid编辑之前的事件</span>
	fnBeforeEdit: function (value, td, col) {
		$("#divEvent09").html("IGrid编辑之前的事件，当前开始编辑 " + col.field + " 列！")
		return true;
	},
	
	//<span class="showClew"> 设置igrid编辑之后的事件</span>
	fnEndEdit: function (value, rowData, td, col) {
		$("#divEvent10").html("IGrid编辑之后的事件，比如编辑完成之后改变该行数据显示");
		rowData.name = "瞧瞧，我变了！";
		rowData.sex = (rowData.sex == 1) ? 0 : 1;
		return true;
	},
	
	//<span class="showClew"> mouseover事件会在鼠标移入对象时触发</span>
	onMouseOver:function (value,rowData,td,tr){
		var manager= $("#igridDemo").manager();
		var col= manager.getColumnOp(td);
		var temp = "My birthday is " + (rowData.birthday).toDateString() + " .";	
				
		if(col.field == 'birthday' && value!=''){
			//<span class="showClew"> 更多tip配置，请参考tip消息框</span>			
			td.tip({action:'once', content:temp, autoClose:true, delayClose:500, global:true});
		}				
	},
	ajax:{
		url: 'services/ccay/demo/student/list/page/${pageSize}/${curPage}/${orderBy}'
	},
	operation: {
		search: {
			//<span class="showClew"> 设置igrid加载数据的按钮Id</span>
			btn: '#btnClickLoad'
		}
	}
};
		
$("#igridDemo").igrid(gridOption);      		
      		</pre>
      	</div>
      	<div class="try">
			<a  onclick="Ccay.example.openTry('#eventFunctionDemo',$('#js').html(),$('#html').html())">亲自试一试</a>
		</div>	 
	 </div>
	 
	 <div title='IGrid行编辑事件' tabid='tab3'>
        <span class="showClew">备注：1.IGrid行编辑事件Demo显示行编辑开始前，行编辑结束后的两种事件<br>
        	2.行索引的计算是从0开始计算（只用于当前页，翻页不累加），依次增大；新增数据（未合并到原始数据集中，翻页累减）是从-1开始计算，依次减小。
        </span><br><br>
        <form id="fmiStudent" class="init ccay-form">
			<div class="ccay-form-body">
				<ul>
					<li class="ccay-form-row">
						<samp class="i18n" i18nKey="ccay.common.label.name" ></samp>
						<span class="ccay-form-input"><input type="text" name="name" maxlength="20"/></span>	
					</li>
				</ul>
			</div>
			<div class="ccay-operate">
		 		<span id="btniStudentSearch" class="default ccay-button">
		 			<a class="ccay-icon search"></a>
		 			<label class="i18n" i18nkey="ccay.common.button.search"></label>
		 		</span>
				<span class="init button ccay-button reset">
					<a class="ccay-icon reset"></a>
					<label class="i18n" i18nkey="ccay.common.button.reset"></label>
				</span>
			</div>
		</form>
		<div id="divShowEvent1" style="color: red; font-size: 13px;"></div>
	 	<div id="divShowEvent2" style="color: red; font-size: 13px;"></div>
		<div class="ccay-grid">
			<div id="fsiStudent">
				<div id="tbriStudent" class="ccay-grid-toolbar">
					<span id="btniStudentDel" class="ccay-button" >
				 		<a class="ccay-icon pre-del"></a>
				 		<label class="i18n" i18nKey="ccay.common.button.gridDelete"></label>
				 	</span>
				 	<span id="btniStudentUndoDel" class="ccay-button" >
				 		<a class="ccay-icon undel"></a>
				 		<label class="i18n" i18nKey="ccay.common.button.gridNotDelete"></label>
				 	</span>
				 	<span id="btniStudentAdd" class="ccay-button" >
				 		<a class="ccay-icon add"></a>
				 		<label class="i18n" i18nKey="ccay.common.button.add"></label>
				 	</span>
				 	<span id="btniStudentSave" class="ccay-button" >
				 		<a class="ccay-icon save"></a>
				 		<label class="i18n" i18nKey="ccay.common.button.save"></label>
				 	</span>
			 	</div>
			 	<div id="grdiStudent"></div>
			</div>
		</div>
	 	<h3>html Code</h3>
	  	<span></span>
	  	<div class="codeArea">
			<pre id='html2'>
&lt;div id="divEvent01" style="color: red;">&lt;/div>
&lt;div id="divEvent02" style="color: red;">&lt;/div>
&lt;div class="ccay-grid">
	&lt;div id="igridDemo">&lt;/div>
&lt;/div>
			</pre>
		</div>
		<h3>js Code</h3>
      	<span></span>
      	<div class="codeArea">
      		<pre id='js2'>
var gridOption = {
	//<span class="showClew"> 设置igrid可以进行编辑</span>
	editMode: true,
	columns: [
		{field: 'id', columnType:'select', multi:true},
		{field: 'name', width:90, header: "ccay.common.label.name", rule: {required: true}},
		{field: 'sex', width:70, header: "sSex", type: 'bool', format: {isIcon: true}},
		{field: 'age', width:70, header: "sAge", type: 'integer'},
		{field: 'birthday', width:110, header: "sBirthday", type: 'date'},
		{field: 'blog', width:300, header: "sBlog", renderer: 'ellipsis'},
		{field: 'lastUpdateDate', width:130, header: "ccay.common.label.lastUpdatedDate", type: 'datetime', editable: false}
	],

	//<span class="showClew"> 设置igrid行编辑之前的事件</span>
	fnBeforeRowEdit: function (rowData, row) {
		$("#divEvent01").html("fnBeforeRowEidt：IGrid行编辑之前的事件，返回false，将不进行行编辑。当前开始编辑的行索引是： " + this.getRowIndex(row) + " ！");
	},
	
	//<span class="showClew"> 设置igrid行编辑之后的事件</span>
	fnEndRowEdit: function (rowData, row) {
		$("#divEvent02").html("fnEndRowEdit：IGrid行编辑之后的事件，返回true，将进行整行渲染。当前结束编辑的行索引是： " + this.getRowIndex(row) + " ！");
	},
	ajax:{
		url: 'services/ccay/demo/student/list/page/${pageSize}/${curPage}/${orderBy}'
	}
};
		
$("#igridDemo").igrid(gridOption);      		
      		</pre>
      	</div>
      	<div class="try">
			<a  onclick="Ccay.example.openTry('#eventFunctionDemo',$('#js2').html(),$('#html2').html())">亲自试一试</a>
		</div>	 
	 </div>
	 
	 <!-- Try区 -->
	 <div title="试一试" tabid="trytab" >
	    <fieldset class='ccay-demo'>
	    <legend ><h2>代码区</h2></legend>
		   
		   <span>请在下面的文本框中编辑您的代码，然后单击此按钮测试结果  ————></span><input value="try it yourself" type="button" onclick="Ccay.example.runDemo()" /> 

				<div>
				    <table  style="width:100%;">
				      <tr>
				        <td style="width:100%;">
						<h3>js Code:</h3>	
						  <!-- 高度按需来调整。默认最小应为100px -->					
	                      <textarea id="jsTxt" style="height:250px;width:99%;"></textarea>
	                    </td>   
	                  </tr>
	                  <tr>
	                    <td style="width:100%;">
						<h3>html Code:</h3>
						  <!-- 高度按需来调整。默认最小应为100px -->
	                      <textarea id="htmlTxt" style="height:150px;width:99%;"></textarea>
	                    </td>
	                  </tr> 
                    </table>
				</div>
           </fieldset>
        <fieldset class='ccay-demo'>
          <legend ><h2>结果区</h2></legend>
			<div>
				<div style="overflow:auto;" id="demoMainPanel"></div>
			</div>
        </fieldset>
     </div>
	 
	 <!-- FAQ区 -->
	 <div title="FAQ">
		  <form class="init ccay-form">
		    <div class="ccay-form-body">
		    <ul>
		    	<li class="ccay-form-row">
			      <samp><h3>问题</h3></samp>
			      <span class="ccay-form-input">
			               <h3>解决方案</h3>
			      </span>
			    </li>
		    </ul>
			</div>     
			<div class="ccay-form-custom">
			    <ul>                     
			        <!-- 若问题和内容较多，可在li中的class加上ccay-form-whole -->
			        <li class="ccay-form-row">
			                          <samp class="i18n" i18nKey=""></samp>                          
			                         <span class="ccay-form-input"></span>
			        </li>  
			    </ul>
			</div>
		  </form>                    
    </div>

</div>